<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="front" />
<title>自助游车票预定</title>
<link href="${ctxStatic }/xiake/css/list.css" rel='stylesheet'type='text/css' />
<script>
	$(function(){
		$('input[name=purchasenum]').on('change',function(){
			var totalPrice = 0;
			var purchasenum = $(this).val();
			var leftSeats = ${realsche.leftSeats };//剩余票数
			if(isNaN(purchasenum)){
				//alert('票数非法');
				$('#totalPrice').text("￥0"); 
				return;
			} else if(purchasenum <= 0) {
				//alert('票数必须大于1张');
				$('#totalPrice').text("￥0"); 
				return;
			}else if (purchasenum >leftSeats ){
				//alert('购票数超过剩余票数');
				$('#totalPrice').text("￥0"); 
				return;
			}
			clearPassengers();
			for(var i=1; i<purchasenum; i++){
				addPassenger();
			}
			if(purchasenum==1){//如果购票张数为1，显示清空
				$(".con_clear").html("清空");
		 	}
			
			var price = $('#priceShow').text();
			totalPrice+=purchasenum*${realsche.retailprice};
			$('#totalPrice').text("￥"+totalPrice.toFixed(2)); 
		});
	});
	
	function purchasenumOnchange(){
		var totalPrice = 0;
		var purchasenum = $("input[name=purchasenum]").val();
		if(isNaN(purchasenum)){
			//alert('票数非法');
			$('#totalPrice').text("￥0"); 
			return;
		} else if(purchasenum <= 0) {
			//alert('票数必须大于1张');
			$('#totalPrice').text("￥0"); 
			return;
		}
		var price = $('#priceShow').text();
		totalPrice+=purchasenum*${realsche.retailprice};
		$('#totalPrice').text("￥"+totalPrice.toFixed(2)); 
	}
	
	function onsub(){
		$('#bookingForm').submit();
	}
	
	//动态添加乘客
	function addPassenger(){
		var numcount = $(".con_passenger").size();//获取当前乘客数量
		var num = Number(numcount)+1; //当前 乘客数量+1
		data = {idx: num};
		$("#"+numcount).after(template('con_passenger_template', data));
		$("input[name=purchasenum]").val(num);//修改购买张数
		purchasenumOnchange();
		$(".con_clear").html("删除");
	}
	
	//动态减少乘客
	function clearPassenger(obj){
		 if($(obj).html()=="清空"){//乘客为1时是清空（清空文本框内容）
		 	$("input[name=passenger]").val("");
			$("input[name=certino]").val("");
		 }
		 var numcount = $(".con_passenger").size();//获取当前乘客数量
		 if(numcount==1){//如果乘客数量为1，显示清空且购票张数为1
				$(".con_clear").html("清空");
				$("input[name=purchasenum]").val(1);
				purchasenumOnchange();
		 }else{
				$(obj).parent().parent().remove();
				if($(".con_passenger").size()==1){
					$(".con_clear").html("清空");
				}
				var num = Number(numcount)-1; //当前 乘客数量-1
				$("input[name=purchasenum]").val(num);//修改购买张数	
				purchasenumOnchange();
				$('.con_passenger').each(function(i, e){
					  $(e).attr("id",i+1);
					  $(e).children().children().first().children().html(i+1);//修改第*位乘客
				});
		} 
	}
	
	function clearPassengers(){
		$(".con_passenger:gt(0)").remove();
	}
	
</script>
</head>
<body>
	<div class="container">
		<input type="hidden" id="menuInfo" value="indexRealsche">
		<div class="container_nav font_normal_size">
			<a href="${ctxFront}/index">霞客约车</a>&gt;<span class="main_color">景区直通车</span>
		</div>
		<div class="container_type font_normal_size">
			<fmt:formatDate value="${realsche.departdate}" pattern="yyyy年MM月dd日"/>&nbsp;&nbsp;${fn:replace(realsche.schename, '---', '至')}自助游车票
		</div>
		<form:form id="bookingForm" modelAttribute="realsche" action="${ctxFront}/realsche/booking" method="post">
			<div class="container_information font_normal_size">
				<form:hidden path="realscheid" />
				<input type="hidden" name="departdateStr" value="${query.departdateStr }">
				<input type="hidden" name="realboardid" value="${query.realboardid }">
				<input type="hidden" name="realoffid" value="${query.realoffid }">
				<input type="hidden" name="ordertype" value="${query.ordertype }">
				<input type="hidden" name="boardaddrfc" value="${boardaddrfc }">
				<input type="hidden" name="offaddrfc" value="${offaddrfc }">
			</div>
			<div class="container_information font_normal_size">
				<div>
					<label>出发地：</label>${realsche.boardaddr }
				</div>
				<div>
					<label>出发时间：</label><fmt:formatDate value="${realsche.realboardtime}" pattern="HH:mm"/>
				</div>
				<div>
					<label>目的地：</label>${realsche.offaddr }
				</div>	
				<c:if test="${not empty realsche.specserv}">
					<div>
						<label>含服务：</label>${realsche.specserv }
					</div>
				</c:if>
				<c:if test="${realsche.schetype == 2 }">
					<div>
						<p class="">
							<label>返程信息：</label>
							${realsche.diffdays==0?'当日':'' }
							${realsche.diffdays==1?'次日':'' }
							${realsche.diffdays==2?'后日':'' }
							${realsche.diffdays==3?'第四日':'' }
							${realsche.gathertime}从${realsche.offaddr}返回
						</p>
					</div>
				</c:if>
			</div>
			<div class="container_train font_normal_size hide">
				<div class="con-tra-time"><fmt:formatDate value="${realsche.realboardtime}" pattern="HH:mm"/></div>
				<div class="con-tra-inf">
					<div class="con-tra-col">${realsche.boardaddr }</div>
					<div class="con-tra-col"><img src="${ctxStatic}/xiake/images/arrow_right.png" style="height: 14px"></div>
					<div class="con-tra-col">${realsche.offaddr }</div>
					<div class="con-tra-lin font_normal_size">
						<p class="">
						<c:if test="${not empty realsche.specserv}">
							${realsche.specserv }
						</c:if>
						<c:if test="${realsche.schetype == 2 }">
							<p class="">
								往返票
								${realsche.diffdays==0?'当日':'' }
								${realsche.diffdays==1?'次日':'' }
								${realsche.diffdays==2?'后日':'' }
								${realsche.diffdays==3?'第四日':'' }
								${realsche.gathertime}从${realsche.offaddr}返回
							</p>
						</c:if>
					</div>
				</div>
			</div>
			<div class="container_information container_contacts font_normal_size">
				<div class="con-inf-tit">订票信息</div>
				<div>
					<label>订车人姓名:</label>
					<input type="text" id="contacts" name="contacts"/>
				</div>
				<div>
					<label>联系人电话:</label>
					<input type="text" id="payertel" name="payertel"/>
				</div>
			</div>
			<div class="container_information font_normal_size">
				<div class="con-inf-tit">乘客信息</div>
				<div class="con-inf-tit">购买张数：<input type="text" class="con-ticketnum" name="purchasenum" value="1">张</div>
				<div class="con_passenger" id="1">
					<div>
						<label>第<span>1</span>位乘客</label><span class="con_clear" onclick="clearPassenger(this);">清空</span>
					</div>
					<div>
						<label>姓名:</label>
						<input type="text"  name="passenger"/>
					</div>
					<div>
						<label>身份证号:</label>
						<input type="text"  name="certino" maxlength="18" />
					</div>
				</div>
				<div class="add_passenger" onclick="addPassenger();">添加乘客</div>
				
			</div>
			<div class="container_submit">
				<div class="container_submit_c font_normal_size">
					<label>车票费：</label><span class="font_large_size main_color" id="totalPrice">￥${realsche.retailprice}</span>
					<div class="container_submit_b font_normal_size pointer" onclick="onsub();">提交订单</div>
				</div>
			</div>
			<div class="notice2 font_normal_size">
				<%@ include file="/WEB-INF/views/include/modules/realscheNotice.jsp"%>
			</div>
		</form:form>
	</div>
	<script src="${ctxStatic}/common/template-native.js" type="text/javascript"></script>
	<script id="con_passenger_template" type="text/html">
		<div class="con_passenger" id="{{=idx}}">
			<div>
				<label>第<span>{{=idx}}</span>位乘客</label><span class="con_clear" onclick="clearPassenger(this);">清空</span>
			</div>
			<div>
				<label>姓名:</label>
				<input type="text"  name="passenger"/>
			</div>
			<div>
				<label>身份证号:</label>
				<input type="text"  name="certino" maxlength="18" />
			</div>
		</div>
	</script>
	<script>
		template.defaults.openTag = '{{';
		template.defaults.closeTag = '}}';
	</script>
</body>
</html>